Podrška za jezike u CSS stilovima brojača: Formatiranje za internacionalizaciju za globalnu publiku

U današnjem globalno povezanom svijetu, web programeri moraju stvarati web stranice i aplikacije koje odgovaraju raznolikoj publici. To znači uzeti u obzir ne samo jezik, već i kulturne konvencije i sustave numeriranja koji se koriste u različitim regijama. CSS stilovi brojača pružaju moćan mehanizam za formatiranje popisa i drugog numeriranog sadržaja na način koji poštuje te kulturne nijanse. Ovaj sveobuhvatni vodič istražit će mogućnosti CSS stilova brojača za internacionalizaciju (i18n) i pokazati kako ih učinkovito koristiti.

Razumijevanje CSS stilova brojača

CSS brojači su varijable koje se održavaju CSS pravilima kako bi se pratilo koliko su puta korištene. Primarno se koriste za numeriranje popisa, naslova i drugih elemenata. CSS stilovi brojača proširuju ovu funkcionalnost dopuštajući vam definiranje prilagođenih sustava numeriranja izvan standardnih arapskih i rimskih brojeva. To je ključno za podršku različitim jezicima i kulturnim preferencijama.

Ključna CSS svojstva koja se koriste pri radu sa stilovima brojača su:

• counter-reset: Inicijalizira ili resetira brojač na određenu vrijednost.
• counter-increment: Povećava vrijednost brojača.
• content: Koristi se s pseudo-elementima ::before ili ::after za prikaz vrijednosti brojača.
• counter() ili counters(): Funkcije koje se koriste unutar svojstva content za formatiranje vrijednosti brojača.
• @counter-style: Definira prilagođeni stil brojača s raznim svojstvima za kontrolu formatiranja.

Moć pravila @counter-style

Pravilo @counter-style je srce internacionalizacije CSS stilova brojača. Omogućuje vam definiranje prilagođenog sustava numeriranja s raznim svojstvima koja kontroliraju kako se vrijednost brojača prikazuje. Pogledajmo ključna svojstva unutar pravila @counter-style:

• system: Određuje algoritam koji se koristi za generiranje prikaza brojača. Uobičajene vrijednosti uključuju cyclic, numeric, alphabetic, symbolic, fixed i additive.
• symbols: Definira simbole koje koristi stil brojača, kao što su brojevi, slova ili prilagođeni znakovi.
• additive-symbols: Koristi se sa sustavom additive za definiranje simbola i njihovih odgovarajućih numeričkih vrijednosti.
• suffix: Određuje tekst koji se dodaje nakon svakog prikaza brojača (npr. točka ili zatvorena zagrada).
• prefix: Određuje tekst koji se dodaje ispred svakog prikaza brojača.
• range: Ograničava raspon vrijednosti za koje je stil brojača primjenjiv.
• pad: Određuje minimalni broj znamenki koje se koriste, dodajući vodeće nule ako je potrebno.
• speak-as: Kontrolira kako čitači zaslona izgovaraju vrijednost brojača radi pristupačnosti.
• fallback: Određuje zamjenski stil brojača koji će se koristiti ako preglednik ne podržava trenutni stil.

Primjeri internacionalizacije s @counter-style

Sada, istražimo neke praktične primjere korištenja @counter-style za formatiranje brojača za različite jezike i kulturne kontekste.

1. Arapske brojke s arapsko-indijskim znamenkama

Iako se arapske brojke (0-9) široko koriste, mnoge regije arapskog govornog područja preferiraju korištenje arapsko-indijskih znamenki (٠‎-٩‎). Možemo stvoriti stil brojača kako bismo to postigli:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Ovaj kod definira stil brojača nazvan arabic-indic koji koristi arapsko-indijske znamenke kao simbole. Svojstvo suffix dodaje točku i razmak nakon svakog broja. CSS zatim primjenjuje ovaj stil na uređeni popis (<ol>) kako bi se brojevi prikazali u arapsko-indijskom formatu.

2. Rimske brojke (velika i mala slova)

Rimske brojke se često koriste u različitim kontekstima, a CSS stilovi brojača ih lako mogu obraditi:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Ovaj primjer pokazuje kako stvoriti stilove brojača s velikim (upper-roman) i malim (lower-roman) rimskim brojevima. Zatim možete primijeniti te stilove na različite popise koristeći CSS klase (.upper-roman i .lower-roman). Na primjer:

<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3. Gruzijske brojke

Gruzijske brojke koriste jedinstveni sustav slova. Možemo definirati stil brojača za prikaz brojeva na gruzijskom:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Ovaj primjer koristi fixed sustav jer gruzijski sustav numeriranja ima ograničen skup simbola za prvih 33 broja. Svojstvo range ograničava stil brojača na vrijednosti između 1 i 33. Za brojeve veće od 33, trebali biste implementirati složeniju logiku ili drugačiji sustav numeriranja.

4. Armenske brojke

Slično gruzijskim, i armenske brojke koriste slova za predstavljanje brojeva:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Ovaj je primjer sličan gruzijskom, koristeći fixed sustav i definirajući armenska slova kao simbole. Raspon range postavljen je na 1-39, pokrivajući osnovni set armenskih brojeva.

5. CJK brojke (kineske, japanske, korejske)

CJK brojke nude veću složenost, s različitim oblicima za formalne i neformalne kontekste te različitim razinama detalja. Pogledajmo pojednostavljeni kineski:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Imajte na umu da je ovo pojednostavljeni prikaz. Potpuna podrška za CJK brojke, posebno za veće brojeve, zahtijevala bi složeniju implementaciju koja uključuje additive sustav i rukovanje mjesnim vrijednostima (desetice, stotice, tisuće, itd.). Ovaj kod prikazuje osnovnu reprezentaciju brojeva.

Napredne tehnike i razmatranja

1. Kombiniranje stilova brojača

Možete kombinirati više stilova brojača kako biste stvorili složenije sheme numeriranja. Na primjer, možete koristiti primarni brojač za poglavlja i sekundarni brojač za odjeljke unutar svakog poglavlja.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. '; 
}

h2::before {
  content: counter(chapter) '.' counter(section) '. '; 
}

Ovaj kod stvara hijerarhijski sustav numeriranja gdje su poglavlja numerirana redom, a odjeljci su numerirani unutar svakog poglavlja (npr. 1.1, 1.2, 2.1, 2.2).

2. Razmatranja o pristupačnosti

Osigurajte da su vaši stilovi brojača pristupačni korisnicima s invaliditetom. Koristite svojstvo speak-as kako biste kontrolirali kako čitači zaslona izgovaraju vrijednost brojača. Na primjer:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

Svojstvo speak-as: numbers; govori čitaču zaslona da izgovori vrijednost brojača kao broj. Druge opcije uključuju spell-out (za sricanje broja) i bullets (za izgovaranje brojača kao grafičkih oznaka).

Dodatno, osigurajte alternativni tekst ili opise za sve prilagođene simbole koji se koriste u vašim stilovima brojača kako biste osigurali da korisnici s oštećenjem vida mogu razumjeti značenje numeriranog sadržaja.

3. Kompatibilnost s preglednicima

Iako su CSS stilovi brojača široko podržani u modernim preglednicima, važno je uzeti u obzir starije verzije preglednika. Koristite svojstvo fallback kako biste odredili zamjenski stil brojača koji će se koristiti ako preglednik ne podržava primarni stil. Na primjer:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

U ovom primjeru, ako preglednik ne podržava cyclic sustav ili prilagođene simbole, vratit će se na stil popisa disc.

4. Kulturna osjetljivost

Prilikom implementacije stilova brojača za različite jezike i kulture, budite svjesni kulturne osjetljivosti. Istražite odgovarajuće konvencije numeriranja i simbole koji se koriste u svakoj regiji. Izbjegavajte korištenje simbola ili formata koji bi mogli biti uvredljivi ili neprikladni.

Na primjer, neke kulture možda preferiraju korištenje različitih interpunkcijskih znakova ili separatora u svojim sustavima numeriranja. Osigurajte da vaši stilovi brojača poštuju te preferencije.

Praktične primjene i slučajevi upotrebe

CSS stilovi brojača mogu se koristiti u širokom spektru scenarija web razvoja, uključujući:

• Generiranje sadržaja: Automatsko numeriranje naslova i podnaslova u sadržaju.
• Kreiranje numeriranih popisa: Formatiranje numeriranih popisa na različitim jezicima i stilovima.
• Numeriranje koraka u vodiču: Vođenje korisnika kroz niz koraka s jasnim i vizualno privlačnim numeriranjem.
• Implementacija prilagođene paginacije: Stvaranje prilagođenih kontrola paginacije s jedinstvenim shemama numeriranja.
• Prikazivanje rangiranih popisa: Prikazivanje rangiranja na vizualno privlačan način koristeći različite stilove brojača.
• Generiranje pravnih dokumenata: Formatiranje pravnih dokumenata sa specifičnim zahtjevima za numeriranje.
• Formatiranje znanstvenih radova: Prikazivanje jednadžbi, slika i tablica s odgovarajućim numeriranjem.

Najbolje prakse za korištenje CSS stilova brojača

Kako biste osigurali da su vaši CSS stilovi brojača učinkoviti i održivi, slijedite ove najbolje prakse:

• Koristite opisna imena za svoje stilove brojača: Odaberite imena koja jasno ukazuju na svrhu i formatiranje stila (npr. arabic-indic, upper-roman, georgian).
• Održavajte svoje stilove brojača modularnima: Definirajte odvojene stilove brojača za različite jezike i sustave numeriranja.
• Koristite CSS klase za primjenu stilova brojača: Izbjegavajte primjenu stilova brojača izravno na elemente; umjesto toga, koristite CSS klase za kontrolu formatiranja.
• Temeljito testirajte svoje stilove brojača: Testirajte svoje stilove brojača u različitim preglednicima i na različitim uređajima kako biste osigurali da se ispravno prikazuju.
• Dokumentirajte svoje stilove brojača: Pružite jasnu dokumentaciju za svoje stilove brojača, uključujući njihovu svrhu, formatiranje i upotrebu.
• Dajte prioritet pristupačnosti: Uvijek uzmite u obzir pristupačnost prilikom izrade stilova brojača i koristite svojstvo speak-as kako biste osigurali da čitači zaslona ispravno izgovaraju vrijednosti brojača.

Zaključak

CSS stilovi brojača pružaju moćan i fleksibilan mehanizam za internacionalizaciju formatiranja numeriranog sadržaja na webu. Korištenjem pravila @counter-style i njegovih različitih svojstava, možete stvoriti prilagođene sustave numeriranja koji poštuju kulturne konvencije i jezične nijanse različitih regija. Slijedeći najbolje prakse navedene u ovom vodiču, možete osigurati da su vaši stilovi brojača učinkoviti, održivi i pristupačni globalnoj publici. Kako se web razvoj nastavlja razvijati, razumijevanje i korištenje CSS stilova brojača za internacionalizaciju postat će sve važnije za stvaranje istinski inkluzivnih i korisnički prijateljskih web iskustava. Prihvatite moć CSS stilova brojača i stvarajte web stranice koje odjekuju s korisnicima iz svih krajeva svijeta.

Daljnje čitanje

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• Potpuni vodič za CSS stilove brojača